<template>
    <view class="content">
        <view class="topx">
            <u-navbar :is-back="false" title-color="#fff" :border-bottom="false" title="服务" :background="background"></u-navbar>
            <image src="@/static/del/serx.jpg" class="bgx"></image>
        </view>
        <view class="forms">
            <image src="../../static/image/iii.png" class="tpxs" @click="goDate"></image>

            <view class="nav_list">
                <image :src="item.image_uri_txt" class="pic" v-for="(item,index) in list" :key="index" @click="goList(item)" ></image>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                background: {backgroundColor: 'transparent' },
                list: [],
            };
        },
        onShow() {
			this.getList()
			// if (uni.getStorageSync('userToken')) {
				
			// } else {
			// 	uni.showModal({
			// 	    title: '温馨提示',
			// 	    content: '请先登录并且绑定手机号，是否去登录？',
			// 		success: function (res) {
			// 			if (res.confirm) {
			// 				uni.navigateTo({
			// 				    url: "/pages/login/login"
			// 				})
			// 			} else if (res.cancel) {
			// 				console.log('用户点击取消');
			// 				uni.switchTab({
			// 					url: '/pages/tabbar/index'
			// 				})
			// 			}
			// 		}
				    
			// 	});
			// }
            
        },
        methods: {
            goList(item) {
				this.$gTo(`/pages/services/list?id=${item.id}`)
                // if (!uni.getStorageSync('userToken')) {
                //     this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
                //         uni.navigateTo({
                //             url: "/pages/login/login"
                //         })
                //     })
                // } else {
                    
                // }
            },
            
            goDate() {
                if (!uni.getStorageSync('userToken')) {
                    this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
                        uni.navigateTo({
                            url: "/pages/login/login"
                        })
                    })
                } else {
                    this.$gTo(`/pages/services/calendar`)
                }
            },
            
            getList() {
            	this.$ajax('serviceTypeList', {
            		userToken: this.$getSync('userToken'),
            		page: 1,
                    limit: 9999,
            	}).then(ret => {
            		if (ret.status == 0) {
                        this.list = ret.data.list
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style scoped lang="scss">
    .topx {
        width: 100%;
        height: 508rpx;
        position: relative;

        .bgx {
            width: 100%;
            height: 508rpx;
            position: absolute;
            left: 0;
            top: 0;
        }
    }

    .forms {
        position: relative;
        margin-top: -28rpx;
        background: #fff;
        border-radius: 28rpx;
        padding-top: 50rpx;

        .tpxs {
            display: block;
            width: 710rpx;
            height: 133rpx;
            margin: 0 auto 26rpx;
        }

        .nav_list {
            display: flex;
            flex-wrap: wrap;
            width: 710rpx;
            margin: 0 auto;

            .pic {
                width: 230rpx;
                height: 144rpx;
                margin-right: 10rpx;
                margin-bottom: 10rpx;

                &:nth-of-type(3n) {
                    margin-right: 0;
                }
            }
        }
    }
</style>